<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Guitar Tab View</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #333;
            color: #fff;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .header-buttons {
            margin-top: 10px;
        }

        .header-buttons button {
            margin: 0 5px;
        }

        #controls {
            position: fixed;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.5); /* 使用rgba来实现半透明背景 */
            color: #e0e0e0; /* 浅色文本 */
            padding: 10px;
            border: 1px solid #555;
            z-index: 1000;
            border-radius: 5px; /* 可选，为了美观可以稍微增加圆角 */
        }

        /* 按钮的半透明背景及字体 */
        #controls button {
            background-color: rgba(68, 68, 68, 0.7); /* 半透明背景 */
            color: rgba(224, 224, 224, 0.8); /* 半透明字体颜色 */
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            margin-right: 5px;
            border-radius: 3px; /* 可选，增加圆角 */
        }

        /* 按钮悬停时略微变化的透明度 */
        #controls button:hover {
            background-color: rgba(85, 85, 85, 0.7);
            color: rgba(224, 224, 224, 0.9);
        }

        /* 导航箭头的样式 */
        .nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 50px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            user-select: none;
            padding: 40px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);
            display: none; /* 默认隐藏 */
            z-index: 10;
        }

        .left-arrow {
            left: 40px;
        }

        .right-arrow {
            right: 40px;
        }

        .image-container {
            position: relative;
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            overflow: hidden;
        }

        .image-container img {
            width: auto;
            height: auto;
            max-width: 50%;
            max-height: 100%;
            object-fit: contain;
        }

        /* 当鼠标悬停在图片容器上时，显示导航箭头 */
        .image-container:hover .nav-arrow {
            display: block;
        }

        .nav-arrow:hover {
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
        }
    </style>
</head>
<body>

<div id="controls">
    <div class="header-buttons">
        <button id="switchStyle" class="btn btn-primary"
                onclick="window.location.href='{% url 'guitar_tab_detail' guitar_tab.id %}'">切换风格
        </button>
        <button id="goHome" class="btn btn-primary"
                onclick="window.location.href='/guitar/guitar_tabs/'">返回主页
        </button>
    </div>
</div>

<div id="imageContainer" class="image-container">
    <img id="guitarImage1" src="{{ image_urls.0 }}" alt="Guitar Tab Image 1">
    <img id="guitarImage2" src="{{ image_urls.1 }}" alt="Guitar Tab Image 2">
    <!-- 左右导航箭头 -->
    <div class="nav-arrow left-arrow" id="prevArrow">&#10094;</div>
    <div class="nav-arrow right-arrow" id="nextArrow">&#10095;</div>
</div>

<script>
    const images = {{ image_urls|safe }};
    let currentIndex = 0;

    const imageElement1 = document.getElementById('guitarImage1');
    const imageElement2 = document.getElementById('guitarImage2');
    const prevArrow = document.getElementById('prevArrow');
    const nextArrow = document.getElementById('nextArrow');

    // 更新图片显示函数
    function updateImages() {
        imageElement1.src = images[currentIndex];
        if (currentIndex + 1 < images.length) {
            imageElement2.src = images[currentIndex + 1];
            imageElement2.style.display = 'block';
        } else {
            // 如果没有第二张图片，隐藏第二个<img>
            imageElement2.style.display = 'none';
        }

        // 更新导航箭头的显示状态
        if (currentIndex <= 0) {
            prevArrow.style.display = 'none';
        } else {
            prevArrow.style.display = 'block';
        }
        if (currentIndex + 2 >= images.length) {
            nextArrow.style.display = 'none';
        } else {
            nextArrow.style.display = 'block';
        }
    }

    // 向前导航
    function navigatePrevious() {
        if (currentIndex > 0) {
            currentIndex -= 2;
            updateImages();
        }
    }

    // 向后导航
    function navigateNext() {
        if (currentIndex + 2 < images.length) {
            currentIndex += 2;
            updateImages();
        }
    }

    // 导航箭头的点击事件
    prevArrow.addEventListener('click', navigatePrevious);
    nextArrow.addEventListener('click', navigateNext);

    // 添加键盘事件监听
    document.addEventListener('keydown', function (event) {
        if (event.code === 'ArrowLeft') {
            event.preventDefault();
            navigatePrevious();
        } else if (event.code === 'ArrowRight') {
            event.preventDefault();
            navigateNext();
        }
    });

    // 初始化图片和箭头显示状态
    updateImages();
</script>

</body>
</html>
